<template>
    <div class="ambient_add">
        <div class="header">
            <div class="return">
                <div @click="store.clickReturn()" style="cursor: pointer;">
                    < 返回</div>
                </div>
                <div class="title">{{ store.state.title }}</div>
            </div>
            <Index />
            <div class="footer">
                <div class="buttons">
                    <app-button class="app-button-ptn" style="margin-right: 8px;"
                        @click="store.createEnvironment()">完成</app-button>
                    <app-button @click="store.clickReturn()">取消</app-button>
                </div>
            </div>

            <PreferenceIndex v-model="store.state.preferenceDialog" v-if="store.state.preferenceDialog" />
        </div>
</template>

<script setup>
import Index from "./components/Index.vue";
import PreferenceIndex from "./components/preference/index.vue";


import { ambientAddStore } from './store.js'

const store = ambientAddStore()

provide('storejs', {
    store,
    state: store.state
})

const clickSubmit = () => {
    console.log(store.state.formData);

}
</script>

<style lang="scss" scoped>
.ambient_add {
    height: calc(100vh - 1px);
    padding: 10px 32px 24px;
    display: flex;
    flex-direction: column;

    .header {
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;

        .return {
            color: #4e5969;
            display: flex;
        }

        .title {
            color: #1d2129;
            font-size: 16px;
            font-weight: 600;
            margin-top: 16px;
        }
    }

    .footer {
        border-top: 1px solid #e5e6eb;
        height: 60px;
        margin: 16px -32px -24px;
        padding-left: 32px;
        display: flex;
        justify-content: flex-start;

        .buttons {
            display: flex;
            align-items: center;
        }
    }
}
</style>